<template>
  <div>
    <el-empty 
    v-if="keyword==``||singers.length==0"
    :image="`${url}/images/empty.png`"
    :description="keyword==''?`咱 搜 不 到 任 何 歌 手 呀！为 你 推 荐 以 下 歌 手`:'咱 搜 不 到 任 何 歌 手 呀！'"
    ></el-empty>
  <div class="singer">
  <singerHead  :singer="item" v-for="(item,index) of singers" :key="index" @click="toSingerPage()"></singerHead>  
  </div>  </div>
</template>

<script>
import singerHead from "../components/sinHead.vue"
export default {
    components:{
      singerHead
    },
    data(){
        return {
            singers:[], 
        }
    },
    props:{
        keyword:null,
        url:null
    },

    watch:{
        keyword(newval,oldval){
            this.getSearch()
        } 
    },
    methods:{
        getSearch(){
            this.$store.commit("getSearch",[4,this.keyword,(data)=>{
            this.singers=data
            console.log("歌手数据",data);
        }])
        }
    },
    mounted(){
      this.getSearch()
    }
}
</script>

<style>
.singer{
  display: flex;
  flex-wrap:wrap; 
  justify-content: center;
} 
</style>